import React, { Fragment } from 'react';
import { Icon } from 'antd';
import cn from 'classnames';
import moment from 'moment';
import styles from './Steps.less';

const dictStatus = {
    1: 'wait',
    2: 'process',
    3: 'error',
    4: 'finish',
    5: 'error',
    6: 'error',
    restart: 'restart' // 喵喵喵
};

const iconMap = index => ({
    finish: <Icon style={{ fontSize: 24, color: '#ffa22d' }} type="check-circle" />,
    error: <Icon style={{ fontSize: 24, color: '#f5222d' }} type="close-circle" />,
    process: <div className={cn(styles.stepNum, styles.stepFill)}>{index + 1}</div>,
    wait: <div className={styles.stepNum}>{index + 1}</div>,
    restart: <Icon style={{ fontSize: 24, color: '#ffa22d' }} type="check-circle" />
});

const lineClassMap = {
    finish: styles.fillLine,
    error: styles.fillLine,
    process: styles.fillLine
};

const Steps = ({ data }) => (
    <div className={cn(styles.step)}>
        {data.map((item, index) => {
            const users = item.users ? item.users.split('#') : [];
            let description = users.length > 1 ? `${users.join('、')}等${users.length}人` : users;
            if (item.statusName) {
                description += `(${item.statusName})`;
            }
            if (item.proxys) {
                description += `（代理人：${item.proxys.split('#').join('、')}）`;
            }
            if (item.empPositionMessage) {
                description = (
                    <Fragment>
                        <div>{`${item.empPositionMessage}`}</div>
                        {description}
                    </Fragment>
                );
            }

            if (item.autoAgreeMessage) {
                description = (
                    <Fragment>
                        {description}
                        <div>{`${item.autoAgreeMessage}`}</div>
                    </Fragment>
                );
            } else if (item.message) {
                description = (
                    <Fragment>
                        {description}
                        <div>审批意见：{`"${item.message}"`}</div>
                    </Fragment>
                );
            }
            // if (item.message) {
            //     description = (
            //         <Fragment>
            //             {description}
            //             <div>审批意见：{`"${item.message}"`}</div>
            //         </Fragment>
            //     );
            // }
            if (item.commentTime) {
                description = (
                    <Fragment>
                        {description}
                        <div>{`${moment(item.commentTime).format('YYYY-MM-DD HH:mm')}`}</div>
                    </Fragment>
                );
            }
            // 接口不规范
            const status = index === 0 ? 'finish' : dictStatus[item.status] || 'wait';
            return (
                <div className={styles.stepBox} key={item.users}>
                    <div className={styles.stepContent}>
                        <div className={styles.icon}>{iconMap(index)[status]}</div>
                        <div className={styles.text}>
                            <div className={styles.title}>{item.typeName || item.type}</div>
                            <div className={styles.desc}>{description}</div>
                        </div>
                    </div>
                    <div className={cn(styles.line, lineClassMap[status])}></div>
                </div>
            );
        })}
    </div>
);

export default Steps;
